<template>
	<view class="withdrawalRecord">

		<view class="balance flex-r-c-c"
			style="background-image: url(https://yft.yangfatang.cn/upload/bg/bg5.png); background-size: 100% 100%;">
			<view class="text">您的当前余额</view>
			<view class="money">{{dataList.balance}}</view>
		</view>

		<view class="content">

			<view class="list_t flex-r-c-c">
				<view class="picker flex-r-s-c">
					<view @tap.stop="isTime = true" style="margin-right: 8rpx;">{{date}}</view>
					<u-picker mode="time" v-model="isTime" :params="params" @cancel="isTime = false"
						@confirm="timePicker"></u-picker>
					<u-icon name="arrow-up" size="20" color="#ACACAC"></u-icon>
				</view>
				<view class="text" style="margin-left: 20rpx;">收入{{dataList.income}}</view>
			</view>

			<view class="list flex-r-b-c" v-for="(item,index) in list" :key="index">
				<view class="list_l flex-r-s-c">
					<image src="/static/mine/icon-qb.png" mode="widthFix"></image>
					<view class="list_l_r" style="margin-left: 10rpx;">
						<view class="list_l_r_t">{{item.pay_type == 1 ? '富友提现' : '微信提现'}}</view>
						<view class="list_l_r_b">{{item.createtime}}</view>
					</view>
				</view>
				<view class="list_r">
					<view class="money">{{item.price}}</view>
					<view class="text">
						{{item.status == 1 ? '审核中' : item.status == 2 ? '第三方平台审核中' : item.status == 3 ? '提现成功' : item.status == 4 ? '平台拒绝' : '提现失败'}}
					</view>
				</view>
			</view>

		</view>

		<view class="text"
			style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold; margin-top: 30rpx;">
			{{titleText}}
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: `${new Date().getFullYear()}年${new Date().getMonth() + 1}月`,
				month: '',
				isTime: false, // 点击时间选择
				params: { // 自定义选择器
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				dataList: {},
				page: 1,
				titleText: '',
				list: []
			};
		},
		onLoad() {
			this.month = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
			this.getWithdrawalList()
		},
		onReachBottom() {
			let that = this
			if (that.titleText == '') { // 防止上拉多次请求
				that.page = that.page + 1
				that.getWithdrawalList()
			}
		},
		methods: {
			// 获取提现记录
			getWithdrawalList() {
				let that = this
				that.$api.withdrawal_list({
					month: that.month,
					page: that.page
				}).then(res => {
					console.log(res)
					that.dataList = res.data.data
					that.titleText = res.data.data.with.data.length == 0 ? '没有记录了' : ''
					that.list = that.list.concat(res.data.data.with.data)
				})
			},
			// 选择月份
			timePicker(e) {
				console.log(e)
				this.date = `${e.year}年${e.month}月`
				this.month = `${e.year}-${e.month}`
				this.page = 1
				this.list = []
				this.titleText = ''
				this.getWithdrawalList()
			}
		}
	}
</script>

<style lang="less">
	.withdrawalRecord {
		width: 90vw;
		height: auto;
		margin: 0 auto;

		.balance {
			width: 100%;
			height: 152rpx;
			font-weight: 500;
			color: #45806E;
			margin-top: 30rpx;
			flex-wrap: wrap;

			view {
				width: 100%;
				text-align: center;
			}

			.text {
				margin-bottom: -50rpx;
			}

			.money {
				font-size: 48rpx;
			}
		}

		.content {
			width: 98%;
			margin: 0 auto;
			margin-top: 30rpx;
			height: auto;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;

			.list_t {
				height: 100rpx;

				.picker {
					color: #818181;
					font-size: 32rpx;
				}
			}

			.list {
				height: 144rpx;
				box-sizing: border-box;
				padding: 20rpx 0rpx;
				border-bottom: 1px solid #F2F2F2;

				&:nth-last-child(1) {
					border-bottom: none;
				}

				.list_l {
					image {
						width: 38rpx;
						height: 38rpx;
					}

					.list_l_r {
						font-weight: 500;

						.list_l_r_t {
							font-size: 28rpx;
						}

						.list_l_r_b {
							font-size: 20rpx;
							color: #939393;
						}
					}
				}

				.list_r {
					view {
						color: #A2A2A2;
						text-align: right;
					}

					.money {
						font-size: 32rpx;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}

	}
</style>
